<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>building</title>
    <link rel="stylesheet" href="../../../static/layer/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../../static/css/font-awesome.min.css" media="all">
    <style>
        /* 是否开启样式 */
        .layui-form-switch {
            width: 54px;
            margin-top: 0;
        }

        .layui-form-switch i {
            top: 2px;
        }

        /* 导航样式 */
        .layui-tab {
            margin: 0;
        }

        .layui-tab-title {
            height: auto;
        }

        .layui-tab-title li {
            padding: 0;
        }

        .layui-tab-card > .layui-tab-title .layui-tab-bar {
            height: 60px;
            line-height: 60px;
        }

        .layui-nav .layui-nav-item a {
            color: #666666;
        }

        .layui-nav .layui-nav-item a:hover {
            color: #000000;
        }

        .layui-tab-card > .layui-tab-title .layui-this {
            background-color: transparent;
        }

        .layui-tab-card > .layui-tab-title .layui-this a {
            color: #000000;
        }

        .layui-tab-card > .layui-tab-title .layui-this::after {
            content: '';
            bottom: 0;
            width: 100%;
            position: absolute;
            left: 0;
            top: 55px;
            height: 6px;
            background-color: #5FB878;
            transition: all .2s;
            -webkit-transition: all .2s;
        }
    </style>
</head>

<body>
<div class="layui-tab layui-tab-card">
    <ul class="layui-nav layui-tab-title layui-bg-gray">
    </ul>
</div>
<div style="padding: 20px; position: relative;">
    <div class="operateTable">
        名称：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="filter-id" placeholder="请输入关键字" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload8">搜索</button>
    </div>
    <div class="operateTable" style="position: absolute; top: 20px; right: 20px;">
        <button class="layui-btn  AUTH-LYGL_LYXZ" data-type="addBuilding"><i class="layui-icon"></i> 新增楼宇</button>
    </div>
    <table class="layui-table" id='buildingTable' lay-filter="business">
    </table>
   <!-- <script type="text/html" id="barDemo">-->
    <div id="barDemo" style="display: none">
        <a class="layui-btn layui-btn-primary layui-btn-mini AUTH-LYGL_LYCK" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-mini AUTH-LYGL_LYBJ" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-mini AUTH-LYGL_LYSC" lay-event="del">删除</a>
    </div>
   <!-- </script>-->
</div>

<script type="text/javascript" src="../../../static/layer/layui.js"></script>
<script>
    var table;
    var businessId = "";
    layui.use(['jquery', 'table', 'form', 'layer', 'element'], function () {
        table = layui.table;
        var $ = layui.jquery,
            element = layui.element, //导航的hover效果、二级菜单等功能，需要依赖element模块
            form = layui.form;

        //监听表格复选框选择
        table.on('checkbox(business)', function (obj) {
            console.log(obj)
        });
        //监听工具条
        table.on('tool(business)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.open({
                    type: 2,
                    title: data.BUILDING_NAME,
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['900px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'operate.html?type=view&id=' + data.BUILDING_ID
                });
            } else if (obj.event === 'del') {
                layer.confirm('确认删除 ' + data.BUILDING_NAME + ' 吗', {offset: '150px'}, function (index) {
//                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: "/building/edit",
                        data: {BUILDING_ID: data.BUILDING_ID, IS_DELETED: 1},
                        dataType: "json",
                        type: "post",
                        async: false,
                        success: function (res) {
                            if (res.errcode === "0") {
                                reloadTable();    // 表格刷新
                                layer.msg(data.BUILDING_NAME + " 已删除", {offset: '150px'});   // 弹出删除成功
                            } else if (res.errcode === "1") {
                                layer.msg(res.errmsg, function () {
                                });
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.error(XMLHttpRequest.status);
                            console.error(XMLHttpRequest.readyState);
                            console.error(textStatus);
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: "编辑 " + data.BUILDING_NAME,
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['900px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'operate.html?type=edit&id=' + data.BUILDING_ID + '&businessId=' + businessId
                });
            }
        });

        var active = {
            changeBusiness: function (obj) { //获取选中数据
                businessId = obj.data("id");
                reloadTable();
            },
            reload: function () {
                var name = $('#filter-id').val();
                reloadTable(name);
            },
            addBuilding: function () {
                layer.open({
                    type: 2,
                    title: '新增楼宇',
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['900px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'operate.html?type=add&businessId=' + businessId
                });
            }
        };

        function reloadTable(name) {
            var data = {};
            data.BUSINESS_ID = businessId;
            if (!!name) {
                data.BUILDING_NAME = name;
            }
            table.render({
                elem: '#buildingTable',
                url: '/building/json/',
                page: true,
                limit: 20,
                height: 'full-150',
                where: data,
                cols: [[
                    {field: 'ROWNUM', fixed: true}
                    , {field: 'BUILDING_NAME', title: '名称', width: 150}
                   /* , {field: 'BUILDING_AREA', title: '面积(m²)', width: 100}*/
                    , {field: 'BUILDING_ADDRESS', title: '位置', width: 250}
                    , {field: 'BUILDING_LNG', title: '经度', width: 120}
                    , {field: 'BUILDING_LAT', title: '纬度', width: 120}
                    , {field: 'BUILDING_INFO', title: '备注', width: 150}
                    , {field: 'CREATE_NAME', title: '创建人', width: 100}
                    , {field: 'CREATE_DATE', title: '创建时间', width: 180, align: 'center'}
                    , {field: 'IS_OPEN', title: '是否开启', templet: '#statusTpl', width: 100, align: 'center'}
                    , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
                ]]
            });
        }

        $.ajax({
            url: "/business/list",
            data: {},
            dataType: "json",
            type: "post",
            async: false,
            success: function (res) {
                if (res.errcode === "0") {
                    $(".layui-nav").empty();
                    var off = '<span class="layui-badge-rim">未开启</span>';
                    var str = '';
                    for (var i = 0; i < res.data.length; i++) {
                        if (res.data[i].IS_OPEN === "on") {
                            str = '<li class="layui-nav-item" data-type="changeBusiness" data-id="' + res.data[i].ID + '"><a href="javascript:;">' + res.data[i].BUSINESS_NAME + '</a></li>';
                        } else if (res.data[i].IS_OPEN === "off") {
                            str = '<li class="layui-nav-item" data-type="changeBusiness" data-id="' + res.data[i].ID + '"><a href="javascript:;">' + res.data[i].BUSINESS_NAME + off + '</a></li>';
                        }
                        $(".layui-nav").append(str);
                    }

                    $('.layui-nav .layui-nav-item').on('click', function () {
                        var type = $(this).data('type');
                        active[type] ? active[type]($(this)) : '';
                    });

                    element.init();

                    $(".layui-nav .layui-nav-item").eq(0).click();

                } else if (res.errcode === "1") {
                    layer.msg(res.errmsg, function () {
                    });
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.error(XMLHttpRequest.status);
                console.error(XMLHttpRequest.readyState);
                console.error(textStatus);
            }
        });

        $('.operateTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            // alert(type);
            active[type] ? active[type].call(this) : '';
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            var ID = data.othis.parent().find("input[name='IS_OPEN']").val();
            var name = data.othis.parent().find("input[name='IS_OPEN']").data("name");
            var open = "on";
            if (this.checked === true) {
                open = "on";
            } else if (this.checked === false) {
                open = "off";
            }
            $.ajax({
                url: "/building/edit",
                data: {BUILDING_ID: ID, IS_OPEN: open},
                dataType: "json",
                type: "post",
                async: false,
                success: function (res) {
                    if (res.errcode === "0") {
                        reloadTable();    // 表格刷新
                        if (open === "on") {
                            layer.msg(name + ' 已启用', {offset: '150px'});
                        } else if (open === "off") {
                            layer.msg(name + ' 已关闭', {offset: '150px'});
                        }
                    } else if (res.errcode === "1") {
                        layer.msg(res.errmsg, function () {
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.error(XMLHttpRequest.status);
                    console.error(XMLHttpRequest.readyState);
                    console.error(textStatus);
                }
            });
        });
    });

    function reload() {
        table.render({
            elem: '#buildingTable',
            url: '/building/json/',
            page: true,
            limit: 20,
            height: 'full-150',
            where: {BUSINESS_ID: businessId},
            cols: [[
                {field: 'ROWNUM', fixed: true}
                , {field: 'BUILDING_NAME', title: '名称', width: 150}
                // , {field: 'BUILDING_AREA', title: '面积', width: 100}
                , {field: 'BUILDING_ADDRESS', title: '位置', width: 250}
                , {field: 'BUILDING_LNG', title: '经度', width: 120}
                , {field: 'BUILDING_LAT', title: '纬度', width: 120}
                , {field: 'BUILDING_INFO', title: '备注', width: 150}
                , {field: 'CREATE_NAME', title: '创建人', width: 100}
                , {field: 'CREATE_DATE', title: '创建时间', width: 180, align: 'center'}
                , {field: 'IS_OPEN', title: '是否开启', templet: '#statusTpl', width: 100, align: 'center'}
                , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
            ]]
        });
    }

</script>
<script type="text/html" id="statusTpl">
    {{# var status=d.IS_OPEN }}
    {{# var id=d.BUILDING_ID }}
    {{# var name=d.BUILDING_NAME }}
    {{# if (status=='on'){ }}
    <input type="checkbox" checked="" value="{{id}}" data-name="{{name}}" name="IS_OPEN" lay-skin="switch"
           lay-filter="switchTest" lay-text="启用|关闭">
    {{# } else{ }}
    <input type="checkbox" value="{{id}}" data-name="{{name}}" name="IS_OPEN" lay-skin="switch" lay-filter="switchTest"
           lay-text="启用|关闭">
    {{# } }}
</script>
<script type="text/javascript" src="../../../static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../../static/js/common/authUtils.js"></script>
</body>

</html>